import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
import _applyDecoratedDescriptor from "@babel/runtime/helpers/esm/applyDecoratedDescriptor";
import _isEmpty from "lodash/isEmpty";
import _some from "lodash/some";
import _find from "lodash/find";
import _forEach from "lodash/forEach";
import _map from "lodash/map";
var _excluded = ["component"];

var _dec, _dec2, _dec3, _dec4, _dec5, _dec6, _dec7, _dec8, _dec9, _class;

import React from 'react';
import { Tabs, Modal } from 'antd';
import { Bind } from 'lodash-decorators'; // import intl from 'utils/intl';

import DropFieldTabsTabPane from "../../Drop/DropFieldTabsTabPane";
import ComponentRender from '..';
import { TabPane as DesignTabPane, hasTemplate } from "../../../utils";
import { convertInitExtraField, convertInitExtraTemplate } from "../../../convertUtils";
import styles from "../../index.less?modules";
var DynamicTabsRender = (_dec = Bind(), _dec2 = Bind(), _dec3 = Bind(), _dec4 = Bind(), _dec5 = Bind(), _dec6 = Bind(), _dec7 = Bind(), _dec8 = Bind(), _dec9 = Bind(), (_class = /*#__PURE__*/function (_React$Component) {
  _inherits(DynamicTabsRender, _React$Component);

  var _super = _createSuper(DynamicTabsRender);

  function DynamicTabsRender() {
    _classCallCheck(this, DynamicTabsRender);

    return _super.apply(this, arguments);
  }

  _createClass(DynamicTabsRender, [{
    key: "render",
    value: function render() {
      var _this = this;

      var _this$props = this.props,
          component = _this$props.component,
          otherComponentRenderProps = _objectWithoutProperties(_this$props, _excluded);

      var _component$fields = component.fields,
          fields = _component$fields === void 0 ? [] : _component$fields;
      var _this$props2 = this.props,
          currentEditComponent = _this$props2.currentEditComponent,
          currentEditField = _this$props2.currentEditField;
      var hasFieldActive = false;
      var className = [styles['dynamic-tabs']];

      if (!currentEditField && currentEditComponent === component) {
        className.push(styles['dynamic-tabs-active']);
      }

      var templates = _map(fields, function (field) {
        if (currentEditField === field) {
          hasFieldActive = true;
        }

        var currentTabComponents = field.children;
        var tabPaneChildren = _isEmpty(currentTabComponents) ? /*#__PURE__*/React.createElement("div", {
          className: styles['dynamic-tabs-placeholder']
        }, "\u62D6\u5165\u7EC4\u4EF6") : _map(currentTabComponents, function (tpl) {
          return /*#__PURE__*/React.createElement(ComponentRender, Object.assign({}, otherComponentRenderProps, {
            component: tpl,
            key: tpl.templateId
          }));
        });
        return /*#__PURE__*/React.createElement(Tabs.TabPane, {
          key: field.fieldName,
          tab: field.fieldLabel
        }, /*#__PURE__*/React.createElement(DropFieldTabsTabPane, {
          onAddField: _this.handleAddField,
          pComponent: component,
          component: field,
          currentEditComponent: currentEditComponent,
          currentEditField: currentEditField
        }, /*#__PURE__*/React.createElement(React.Fragment, null, tabPaneChildren)));
      });

      if (hasFieldActive) {
        className.push(styles['dynamic-tabs-field-active']);
      }

      return /*#__PURE__*/React.createElement("div", {
        className: className.join(' '),
        onClick: this.handleTabsComponentClick
      }, /*#__PURE__*/React.createElement(Tabs, {
        type: "editable-card",
        onChange: this.handleTabChange,
        onEdit: this.handleTabsEdit,
        onTabClick: this.handleTabClick
      }, templates));
    }
    /**
     * 标签点击需要阻止冒泡
     * @param {string} activeTabKey
     * @param {import('react').SyntheticEvent} e
     * @memberof DynamicTabsRender
     */

  }, {
    key: "handleTabClick",
    value: function handleTabClick(activeTabKey, e) {
      e.stopPropagation();
      this.handleTabChange(activeTabKey);
    }
  }, {
    key: "handleTabsComponentClick",
    value: function handleTabsComponentClick() {
      this.handleActiveTemplate();
    }
  }, {
    key: "handleActiveTemplate",
    value: function handleActiveTemplate() {
      var _this$props3 = this.props,
          onActiveComponent = _this$props3.onActiveComponent,
          component = _this$props3.component;
      onActiveComponent(component);
    }
  }, {
    key: "handleActiveField",
    value: function handleActiveField(field) {
      var _this$props4 = this.props,
          component = _this$props4.component,
          onActiveField = _this$props4.onActiveField;
      onActiveField(component, field);
    }
  }, {
    key: "handleTabChange",
    value: function handleTabChange(activeKey) {
      var _this$props5 = this.props,
          component = _this$props5.component,
          currentEditField = _this$props5.currentEditField;
      var _component$fields2 = component.fields,
          fields = _component$fields2 === void 0 ? [] : _component$fields2;

      var field = _find(fields, function (f) {
        return f.fieldName === activeKey;
      });

      if (field && currentEditField !== field) {
        this.handleActiveField(field);
      }
    }
    /**
     * 新增 Tabs.Pane
     * 需要组织冒泡
     */

  }, {
    key: "handleAddTabPane",
    value: function handleAddTabPane(e) {
      if (e) {
        e.stopPropagation();
      }

      var component = this.props.component;
      var newField = convertInitExtraField(component, DesignTabPane);
      var _component$fields3 = component.fields,
          fields = _component$fields3 === void 0 ? [] : _component$fields3;
      component.fields = [].concat(_toConsumableArray(fields), [newField]);

      if (component.fields.length === 1) {
        var onActiveField = this.props.onActiveField;
        onActiveField(component, newField);
      } else {
        this.forceUpdate();
      }
    }
  }, {
    key: "handleTabsEdit",
    value: function handleTabsEdit(targetKey, action) {
      if (action === 'add') {
        this.handleAddTabPane();
      }

      if (action === 'remove') {
        this.handleTabPaneRemove(targetKey);
      }
    }
    /**
     * 删除某一个 tabPane
     */

  }, {
    key: "handleTabPaneRemove",
    value: function handleTabPaneRemove(tabPaneKey) {
      var that = this;
      var _that$props = that.props,
          _that$props$component = _that$props.component,
          component = _that$props$component === void 0 ? {} : _that$props$component,
          currentEditComponent = _that$props.currentEditComponent,
          currentEditField = _that$props.currentEditField;
      var _component$fields4 = component.fields,
          fields = _component$fields4 === void 0 ? [] : _component$fields4;
      var nextFields = [];
      var removeField;

      _forEach(fields, function (field) {
        if (field.fieldName === tabPaneKey) {
          removeField = field;
        } else {
          nextFields.push(field);
        }
      });

      Modal.confirm({
        content: "\u662F\u5426\u5220\u9664\u5F53\u524D\u6807\u7B7E: ".concat(removeField.fieldLabel),
        onOk: function onOk() {
          component.fields = nextFields;

          if (currentEditComponent === component) {
            if (currentEditField === removeField) {
              if (nextFields[0]) {
                that.handleActiveField(nextFields[0]);
              } else {
                that.handleActiveTemplate();
              }

              return; // 删除 tabsTabPane 逻辑结束
            }
          } else if (_some(removeField.children, function (fieldC) {
            return hasTemplate(fieldC, currentEditComponent);
          })) {
            if (nextFields[0]) {
              that.handleActiveField(nextFields[0]);
            } else {
              that.handleActiveTemplate();
            }

            return; // 删除 tabsTabPane 逻辑结束
          }

          that.forceUpdate(); // 删除 tabsTabPane 逻辑结束
        }
      });
    }
  }, {
    key: "handleAddField",
    value: function handleAddField(field, newTpl) {
      var newTemplate = convertInitExtraTemplate(newTpl);
      var _field$children = field.children,
          children = _field$children === void 0 ? [] : _field$children;
      var newChildren = [].concat(_toConsumableArray(children), [newTemplate]); // eslint-disable-next-line no-param-reassign

      field.children = newChildren;
      this.forceUpdate();
    }
  }]);

  return DynamicTabsRender;
}(React.Component), (_applyDecoratedDescriptor(_class.prototype, "handleTabClick", [_dec], Object.getOwnPropertyDescriptor(_class.prototype, "handleTabClick"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "handleTabsComponentClick", [_dec2], Object.getOwnPropertyDescriptor(_class.prototype, "handleTabsComponentClick"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "handleActiveTemplate", [_dec3], Object.getOwnPropertyDescriptor(_class.prototype, "handleActiveTemplate"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "handleActiveField", [_dec4], Object.getOwnPropertyDescriptor(_class.prototype, "handleActiveField"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "handleTabChange", [_dec5], Object.getOwnPropertyDescriptor(_class.prototype, "handleTabChange"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "handleAddTabPane", [_dec6], Object.getOwnPropertyDescriptor(_class.prototype, "handleAddTabPane"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "handleTabsEdit", [_dec7], Object.getOwnPropertyDescriptor(_class.prototype, "handleTabsEdit"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "handleTabPaneRemove", [_dec8], Object.getOwnPropertyDescriptor(_class.prototype, "handleTabPaneRemove"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "handleAddField", [_dec9], Object.getOwnPropertyDescriptor(_class.prototype, "handleAddField"), _class.prototype)), _class));
export { DynamicTabsRender as default };